<script lang="ts">
	import { menus, isSideBarOpen } from '$store/menus';
	import logo from './svelte-logo.svg';

	const openSidebar = () => {
		isSideBarOpen.set(true);
	};
</script>

<header class="mx-auto flex justify-between px-0 md:py-4 md:sticky md:flex-row">
	<div class="flex-grow-0 w-10 h-10 pl-1 md:pl-5 md:w-24 md:h-16">
		<a href="https://prom-aid.dev.originforce.club">
			<img class="w-full h-full object-contain" src={logo} alt="logo" />
		</a>
	</div>
	<nav class="flex flex-grow">
		<ul class="hidden md:flex relative items-center justify-start h-full list-none p-0 ml-0">
			{#each $menus as item}
				<li
					class="relative flex justify-center w-32 h-full {item.active ? 'selected' : 'unselected'}"
				>
					<a class="flex items-center h-full text-xl" href={item.href}>{item.title}</a>
				</li>
			{/each}
		</ul>
		<div class="md:hidden flex-grow self-center text-center text-xl">促销小助手</div>
	</nav>
	<div class="flex-grow-0 w-10 h-10 flex justify-center items-center">
		<button
			href="#"
			class="md:hidden iconfont icon-menu w-full h-full text-lg"
			on:click={openSidebar}
		/>
	</div>
</header>

<style lang="scss">
	li::before {
		@apply w-full h-0 absolute bottom-0 left-0 border-none;
		content: '';
	}
	.selected::before {
		@apply border-b-4 border-solid border-red-500;
	}
	.unselected:hover::before {
		@apply border-b-4 border-solid border-red-300;
	}
</style>
